{% load static %}
{% load modeltag %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <link rel="shortcut icon" href="{% static 'bg_images/1.ico' %}" type="image/x-icon">
    <title></title>

    <link type="text/css" rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/static/css/conmmons.css">
    {% block css_m %}{% endblock %}

    <script type="text/javascript" src="/static/plugins/jQuery/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    {% block js_m %}{% endblock %}
</head>
<body>

<div class="pg-header">
    <div class="container-fluid">

        <div class="row">
            <nav class="navbar navbar-default navbar-fixed-top left" style="left: 0;right: 0">
                <div class="col-md-2">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        {#                    <a class="navbar-brand" href="{% url 'home' %}">主页</a>#}

                        <a class="navbar-brand" href="{% url 'home' %}">
                            <strong>
                            <img alt="" src="/bgimage/logo.jpg" style="height: 30px;width: 30px">
                            龚庭鼻炎馆南阳店
                        </strong>
                        </a>


                    </div>
                </div>
                {% if request.tracer %}
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">





                    <div class="col-md-6">
                    <form class="navbar-form navbar-left" method="post" autocomplete="off"

                          action={% url "search_customer" %}>
                        {% csrf_token %}
                        <div class="form-group" id="div_search">
                            <input type="text" class="form-control" placeholder="模糊姓名搜索"
                                   id="input_name" autocomplete="off"/>
                            <input type="text" class="hidden" placeholder="模糊姓名搜索" name="name_searched"
                                   id="search_name" autocomplete="off"/>
                        </div>
                        <button type="submit" class="btn btn-default" id="btn_search_cus" disabled="disabled"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索</button>
                        <a class="btn btn-default" href="{% url 'customer_add' %}"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添加客户</a>
                    </form>
                    <ul class="navbar-nav breadcrumb">

                        {% path_nav request %}
                    </ul>



                {% endif %}

                </div>


                <ul class="nav navbar-nav navbar-right">

                    {% if request.tracer %}
                        <li class="dropdown">
                            {% if request.tracer.nick_name %}
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false"><strong
                                        style="font-size: 16px">{{ request.tracer.nick_name }}</strong>
                                    <small>已登录</small><span
                                            class="caret"></span></a>
                            {% else %}
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false"><strong
                                        style="font-size: 16px">{{ request.tracer.user_name }}</strong>
                                    <small>已登录</small><span
                                            class="caret"></span></a>
                            {% endif %}
                            <ul class="dropdown-menu">
                                {% if request.tracer.auth_level == 1 or request.tracer.auth_level == 2 %}
                                    <li><a href={% url 'admin' %}>管理页面</a></li>
                                    <li role="separator" class="divider"></li>
                                {% endif %}
                                <li><a href={% url 'edit_username' %}>修改用户名或密码</a></li>
                                <li><a href="{% url 'edit_nickname' %}">修改昵称</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href={% url 'logout' %}><span style="margin-right: 2px"
                                                                     class="glyphicon glyphicon-log-out"
                                                                     aria-hidden="true"></span>退出登录</a></li>
                            </ul>
                        </li>
                    {% else %}

                        {#                        <li><a style="margin-right: 30px; font-size: 16px" href="{% url 'login' %}"><span#}
                        {#                                style="margin-right: 2px" class="glyphicon glyphicon-user"#}
                        {#                                aria-hidden="true"></span><strong>登 录</strong></a></li>#}
                    {% endif %}
                </ul>

                </div><!-- /.navbar-collapse -->


            </nav>
        </div>


        <div class="row">
            <div class="col-md-offset-2">
                <div class="dropdown open hidden " style="top:50px;z-index: 999" id="search_div">

                    <ul id="ul_" class="dropdown-menu" aria-labelledby="dropdownMenu1">


                    </ul>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</div>

<div class="pg-body">


    <div class="content">



        {% block content_body %}{% endblock %}
    </div>
</div>


{% block content_bottom %}{% endblock %}
<script>
    $(function () {

        var openddt = $(".open").children('.dropdown-toggle');

        openddt.attr('data-toggle', '');

        openddt.click(function () {

            $(this).siblings(".dropdown-menu").toggle();

        });

    });
    $(document).ready(function () {
        $('#div_search').on('compositionend', '#input_name', function () {
            $('#search_div').removeClass("hidden");
            var html = $("div .nf").html();

            $("div .nf").remove();  //移出,避免重复添加.
            var li_ = ''
            $.ajaxSetup({

                data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

            });
            $.ajax({
                    url: '/show_customer.html/',
                    type: 'POST',
                    data: {
                        'name': $("#input_name").val(),

                    },
                    dataType: 'JSON',
                    success: function (arg) {


                        $.each(arg['customers_found'], function (i, v) {

                            li_ += "<li class='nf'><a id=" + v.pid + " name=" + v.name + " class='confirm_name'>" + v.pid + ". " + v.name + "  " + v.sex + " " + v.age + "岁 " + v.phone + "</li>"

                        });

                        $('#ul_').append(li_);

                        $(".confirm_name").on("click", function () {
                            $('#search_div').addClass("hidden");

                            var chose_id = $(this).prop("id");
                            $("#search_name").val(chose_id)
                            $("#btn_search_cus").removeAttr('disabled')




                        })
                    }

                }
            );

        });

    })


</script>

<script>

</script>
</body>
</html>